import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import './index.css';
import request from '../../api/axios';
const SymptomDetail: FC = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const name = searchParams.get('name');
  const [detail, setDetail] = useState<any | null>(null);

  useEffect(() => {
    const fetchDetail = async () => {
      if (!id) return;
      // TODO: 替换为真实药品详情接口
      // 这里先请求列表接口作为占位或返回假数据
      try {
        const data = await request.get(`/api/health/share/knowledgeBase/v1/findDiseaseKnowledge?id=${id}`);
        setDetail(data?.data?.result || null);
      } catch {
        setDetail(null);
      }
    };
    fetchDetail();
  }, [id]);

  return (
    <div className="conmon-container detail-container">
      <div className="conmon-header">
        <div></div>
        <div></div>
      </div>
      <div className="conmon-main detail-main">
        <div className="detail-disclaimer">
          本模块知识仅供参考，如有需要，请在医生指导下使用
        </div>
        <div className="detail-title">{name}</div>
        <div className="detail-section">
          <div className="detail-section-title">[病理]</div>
          <div className="detail-section-content">
            {detail?.pathology}
          </div>
        </div>
        <div className="detail-section">
          <div className="detail-section-title">[症状]</div>
          <div className="detail-section-content">
            {detail?.symptom}
          </div>
        </div>
        <div className="detail-section">
          <div className="detail-section-title">[宜与忌]</div>
          <div className="detail-section-content">
            {detail?.benefitTaboo}
          </div>
        </div>
        <div className="detail-section">
          <div className="detail-section-title">[西药治疗]</div>
          <div className="detail-section-content">
            {detail?.westernMedicineTreatment}
          </div>
        </div>
        <div className="detail-section">
          <div className="detail-section-title">[中药治疗]</div>
          <div className="detail-section-content">
            {detail?.chineseMedicineTreatment}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SymptomDetail;


